<template>
  <div>
    <el-form-item label="量级设置">
      <el-input-number v-model="activeData.table.level" :min="1" :max="100" label="描述文字" />
    </el-form-item>
    <el-form-item v-if="activeData.table.copyWriting" label="最低分文案">
      <el-input v-model="activeData.table.copyWriting.min" placeholder="请输入最低分文案" />
    </el-form-item>
    <el-form-item v-if="activeData.table.copyWriting" label="最高分文案">
      <el-input v-model="activeData.table.copyWriting.max" placeholder="请输入最高分文案" />
    </el-form-item>
    <el-form-item label="图标">
      <span
        v-for="icon in iconList"
        :key="icon"
        :class="[icon, icon === activeData.icon ? 'selected' : '']"
        :style="styleObject"
        @click="handleSelectIcon(icon)"
      />
    </el-form-item>

    <el-form-item label="图标颜色">
      <el-color-picker v-model="activeData.iconColor" />
    </el-form-item>

    <matrix-option :active-data="activeData" />
  </div>
</template>
<script>
import MatrixOption from './matrix'

import draggable from 'vuedraggable'

export default {
  name: 'ConfigItemMatrixScale',
  components: {
    MatrixOption,
    draggable
  },
  props: ['activeData'],
  data() {
    return {
      iconList: [
        'tduck-taiyang',
        'tduck-biaoqing-weixiao',
        'tduck-dianzan',
        'tduck-aixin',
        'tduck-star',
        'tduck-moonyueliang'
      ]
    }
  },
  computed: {
    styleObject() {
      return {
        '--color': this.activeData.iconColor || '#f7ba2a'
      }
    }
  },
  methods: {
    handleSelectIcon(icon) {
      // console.log(icon)
      this.$set(this.activeData, 'icon', icon)
    }
  }
}
</script>

<style lang="scss" scoped>
[class^='tduck-'],
[class*=' tduck-'] {
  margin: 5px;

  &:hover {
    color: var(--color);
  }
}

.selected {
  color: var(--color);
}
</style>
